<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性:[微调：文字或者图片]*/
			img{
				border:1px solid red;
			/*margin：1个属性值 顺时针：上 右 下 左*/
				margin:10px;
			/*margin：2个属性值 顺时针：上 右 下 左*/
			    margin:10px 200px;
				/*
				常用:盒子自适应居中---失效
				行内块:可以设置高宽、在一行内显示、无法居中
				margin使用问题1  自适应居中，建议使用div，套块元素，行内块元素，行内元素
				      使用问题2  行元素，加上下 右左外边距---	
								行元素：不可以设置高宽【高---不可以动上下】，在一行显示【宽--可以左右】
				      使用问题3：垂直外边距
					  使用问题4：垂直外边距
				*/
			/*margin：3个属性值 顺时针：上 右 下 左*/
			    margin:100px 200px 300px;
			/*margin：3个属性值 顺时针：上 右 下 左*/
			    margin:100px 200px 300px 400px;
			}
			h1{
				/*块元素：可以设置高宽，不在一行显示，无法居中，内置文本
				   text-align:center;
				*/
			   /*常用：盒子自适应居中*/
			   width:100%;
			   border:1px solid red;
			   text-ali
			}
			span{
				/*行元素：不可以设置高宽【高---不可以动上下】，在一行显示【宽--可以左右】，无法居中，内置文本
				   text-align:center;
				*/
			}
			div{
				width:200px;
				height:200px;
				background:red;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 框模型、盒子模型:四个部分组成:
		                          外边距:
								  边框:--
								  内边距:边框以内 与内容 之间距离，叫做内边距
								  内容:块、行、行内元素本身宽、高
		所有元素存在于框模型中 -->
		<h1>块级元素</h1>
		<img src="img/p_small_001.jpg" width="300px" alt="001">
	</body>
</html>